<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <div class="btnGroup">
        <input type="button" value="圆形" class="circle">
        <input type="button" value="三角" class="triangle">
        <input type="button" value="矩形" class="rectangle">
    </div>

    <script src="../tools.js"></script>
    <script>
        // 父类
        class Graph {
            constructor(left, top, color) {
                this.left = left;
                this.top = top;
                this.color = color;
                this.node = null;
            }
            setPosition() {
                this.node.style.cssText += `
                    position: absolute;
                    left: ${this.left}px;
                    top: ${this.top}px;
                `;
            }
            setSize() {
                this.node.style.cssText += `
                    width: ${this.width}px;
                    height: ${this.height}px;
                `;
            }
            setColor() {
                this.node.style.cssText += `
                    background-color: ${this.color};
                `;
            }
            render() {
                this.node = document.createElement('div');
                this.setPosition();
                this.setSize();
                this.setColor();
                document.body.appendChild(this.node);
            }
        }
        // 矩形
        class Rectangle extends Graph {
            constructor(left, top, color, width, height) {
                super(left, top, color);
                this.width = width;
                this.height = height;
            }
        }



        // 圆形
        class Circle extends Graph {
            constructor(left, top, color, r) {
                super(left, top, color);
                this.r = r;
            }
            setSize() { // 重写
                this.node.style.cssText += `
                    width: ${this.r * 2}px;
                    height: ${this.r * 2}px;
                    border-radius: 50%;
                `;
            }
        }


        // 三角
        class Triangle extends Graph {
            constructor(left, top, color, bottom, height) {
                super(left, top, color);
                this.bottom = bottom;
                this.height = height;
            }
            setSize() {
                this.node.style.cssText += `
                    width: 0px;
                    height: 0px;
                    border-top: 0 solid transparent;
                    border-right:${this.bottom}px solid transparent;
                    border-bottom: ${this.height}px solid ${this.color};
                    border-left: ${this.bottom}px solid transparent;
                `;
            }
            setColor() {
                this.node.style.cssText += `
                    background-color:transparent;
                `;
            }
        }

        document.querySelector('.btnGroup').onclick = function (event) {
            let x = 0, y = 0, color = '', width = 0, height = 0;

            x = random(innerWidth);
            y = random(innerHeight);
            color = `rgb(${random(255)},${random(255)},${random(255)})`;
            width = random(50, 100);
            height = random(50, 100);

            switch (event.target.className) {
                case 'circle':
                    new Circle(x, y, color, random(10, 50)).render();
                    break;
                case 'triangle':
                    new Triangle(x, y, color, width, height).render();
                    break;
                case 'rectangle':
                    new Rectangle(x, y, color, width, height).render();
                    break;
            }
        }


    </script>
</body>

</html>